<template>
  <div class="myHome">
    <!-- 导入头部栏 -->
    <header>
      <onion-head></onion-head>
    </header>
    <!-- 导入轮播图 -->
    <onion-banner></onion-banner>
    <!-- 导入图标列表 -->
    <onion-nav></onion-nav>
    <!-- 导入每日上新 -->
    <onion-new></onion-new>
    <!-- 导入小葱种草 -->
    <onion-seed></onion-seed>
    <!-- 导入品牌特卖 -->
    <onion-brand></onion-brand>
    <!-- 导入详情列表 -->
    <onion-detail></onion-detail>

    <footer-tab></footer-tab>
  </div>
</template>

<script>
import onionHead from "@/pages/myhead/onionHead.vue";
import onionBanner from "@/pages/mybanner/onionBanner.vue";
import onionNav from "@/pages/mynav/onionNav.vue";
import onionNew from "@/pages/mynew/onionNew.vue";
import onionSeed from "@/pages/myseed/onionseed.vue";
import onionBrand from "@/pages/mybrand/onionBrand.vue";
import onionDetail from "@/pages/mydetail/oniondetail.vue";
import footerTab from '@/components/onionFooter.vue'

import { get } from "@/utils/http";
import { mapState } from "vuex";

export default {
  components: {
    onionHead,
    onionBanner,
    onionNav,
    onionNew,
    onionSeed,
    onionBrand,
    onionDetail,
    footerTab
  },
  computed: {
    ...mapState(["home"]),
  },
  methods: {
    init() {
      let getData = (res) => {
        return new Promise((resolve, reject) => {
          if (res) {
            resolve(res);
          }
        });
      };
      get("/api/index")
        .then(
          (response) => {
            let res = response.data;
            if (res.status == 200) {
              let data = res.data;
              return getData(data);
            }
          },
          (error) => {
            console.log(error);
          }
        )
        .then((data) => {
          let { banner, menus } = data;
          let arr = [];
          banner.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.src = item.pic;
            arr.push(obj);
          });
          this.$store.dispatch("home/setBannerAsync", arr);
          this.$store.dispatch("home/setNavAsync", menus);
          //   console.log(this.$store.state);
          return getData(data);
        })
        .then( (data) => {
            let { info : { fastList },
             } = data;
            let arr2 = [];
            fastList.forEach( (item) => {
                let obj = {};
                obj.id = item.id;
                obj.path = item.pic;
                obj.text = item.cate_name;
                arr2.push(obj);
            });
            // console.log(this.$store.state);
            this.$store.dispatch("home/setNewAsync",arr2);
            return getData(data);
        })
        .then((data) => {
            let { info : { bastBanner }, } = data;
            // console.log(bastBanner);
            let arr3 = [];
            bastBanner.forEach( (item) => {
              let obj = {};
              obj.id = item.id;
              obj.path = item.img;
              obj.link = item.link;
              arr3.push(obj);
            })
            // console.log(arr3);
            this.$store.dispatch('home/setBastBannerAsync',arr3);
            return getData(data);
        })
        .then( (data) => {
          let { info : {bastList} } = data;
          // console.log(bastList);
          let arr5 = [];
          bastList.forEach( item => {
            let obj = {};
            obj.id = item.id;
            obj.path = item.image;
            obj.text = item.store_name;
            obj.price = item.price;
            arr5.push(obj);
          })
          this.$store.dispatch('home/setDetailListAsync',arr5);
           return getData(data);
        })
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less">
body {
  background: #f0f0f0;
}
.myHome{
  padding-bottom: 50px;
}
</style>